<template>
	<view class="content">
		
		<view class="topBox">
			<view class="titleBox" :class=" index == 1 ? 'borders':'' " v-for="(item,index) in topList" :key="index" @tap="topThis(index)">
				<view class="titleName" :class=" item.showThis == true ? 'thisTitle':'' ">{{item.name}}</view>
				<view class="titleIcon" :class=" item.showThis == true ? 'titleIcons':'' "></view>
			</view>
		</view>
		
		<view class="noneBox" v-show="showNone">
			<view class="names">暂无咖啡订单~</view>
		</view>
		
		<view class="rows" v-for="(item,index) in list" :key="index">
			<view class="titleBox">
				<view class="title">{{item.title}}</view>
				<!-- <view class="status" :class="item.status == 0 ? 'color_grey':''">{{ item.status == 0 ? '已完成':'制作中' }}</view> -->
				<view class="status" v-show="item.status == 0">未使用</view>
				<view class="status" v-show="item.status == 1">制作中</view>
				<view class="status" v-show="item.status == 2">已完成</view>
				
				<view class="clearBoth"></view>
			</view>
			<view class="rowsBody" @tap="inDetails(item)">
				<image class="cover" :src="item.cover" mode=""></image>
				<view class="right">
					<view class="time">下单时间：{{item.time}}</view>
					<view class="number">数量：{{item.number}}</view>
					<view class="pay fontSemiBold">实付：¥{{item.price}}</view>
				</view>
			</view>
			<view class="btns" @tap="btnThisDetails(item)">查看详情</view>
			<view class="btns" @tap="inDetails(item)">再来一单</view>
			<view class="clearBoth"></view>
		</view>
		
	</view>
</template>
<style>
	.content{width: 100%;min-height: 100vh;background: rgb(245,245,249);padding-top: 2upx;}
	.content .topBox{width: 90%;height:100upx;margin:40upx 0;margin-left: 5%;border-radius: 100upx;background: white;display: flex;justify-content: center;align-items: center;}
	.content .topBox .titleBox{width: 33.3%;text-align: center;font-size: 32upx;color:#999999;}
	.content .topBox .titleName{font-size: 32upx;}
	.content .topBox .borders{border-left:2upx solid #EEEEEE;border-right:2upx solid #EEEEEE}
	.content .topBox .thisTitle{color:#262626;font-weight: bold;}
	.content .topBox .titleIcon{width:20%;margin-left: 40%;margin-top: 10upx;height:4upx;background: white;}
	.content .topBox .titleIcons{width:20%;margin-left: 40%;margin-top: 10upx;height:4upx;background: #DC582A;}
	.content .noneBox{width: 100%;display: flex;justify-content: center;flex-wrap: wrap;margin-top: 100upx;}
	.content .noneBox .noneImage{width:400upx;height:260upx;}
	.content .noneBox .names{width: 100%;color:#B3B3B3;margin-top: 0;text-align: center;}
	.content .rows{width: 90%;padding:5%;margin-left: 5%;background: white;border-radius: 10upx;;}
	.content .rows .titleBox{width: 100%;}
	.content .rows .titleBox .title{font-weight: bold;color:#262626;font-size: 32upx;float: left;}
	.content .rows .titleBox .status{font-weight: bold;color:#DC582A;font-size: 32upx;float: right;}
	.content .rows .titleBox .color_grey{font-weight: bold;color:#999999;font-size: 32upx;}
	.content .rows .rowsBody{width: 100%;margin:40upx 0 30upx 0;}
	.content .rows .rowsBody .cover{width: 120upx;height:120upx;float: left;border-radius: 10upx;margin-right: 5%;}
	.content .rows .rowsBody .time,
	.content .rows .rowsBody .number,
	.content .rows .rowsBody .pay{color:#444444;font-size: 24upx;margin-bottom: 12upx;}
	.content .rows .btns{float: right;color:#262626;font-size: 24upx;margin-left: 5%;border:2upx solid #262626;padding:10upx 20upx;border-radius: 10upx;}
</style>
<script>
	import Share from '@/common/wx_share.js'
	export default {
		data() {
			return {
				share:{
					title:"",
					path:'/pages/tabbar/mine',
					imageUrl:'',
					desc:'',
					content:''
				},
				topList:[
					{name:"全部",showThis:true},
					{name:"制作中",showThis:false},
					{name:"已完成",showThis:false},
				],
				list:[
					// {
					// 	id:1,
					// 	title:"名字",
					// 	status:0,
					// 	cover:"../../../pages_index/static/login/login.png",
					// 	time:"2020.1.2",
					// 	number:"2",
					// 	price:"21",
					// 	btnStatus:0,
					// },
					// {
					// 	id:1,
					// 	title:"名字",
					// 	status:1,
					// 	cover:"../../../pages_index/static/login/login.png",
					// 	time:"2020.1.2",
					// 	number:"2",
					// 	price:"21",
					// 	btnStatus:1,
					// }
				],
				showNone:false,
				pages:1,

				
			}
		},
		onLoad(){
			this.AjaxLoad()
		},
		methods: {
			AjaxLoad(){
				var list = []
				var filter = ""
				if( this.topList[0].showThis == true ){
					filter = 0
				}else if( this.topList[1].showThis == true ){
					filter = 1
				}else if( this.topList[2].showThis == true ){
					filter = 2
				}
				let param={
					token:this._$userToken("userInfo").token,
					type:filter
				};
				this._$InitRequest.request("coffee_order/list", param).then(res => {

					res.data.data.forEach( (item) =>{
						list.push({
							id:item.id,
							title:item.goods.goods_name,
							status:item.status,
							cover:item.goods.thumb_url,
							time:item.goods.goods_name,
							number:item.num,
							time:item.addtime,
							price:item.goods.price,
							brewing:item.brewing,
							machine_code:item.machine_code,
							model_id:item.model_id,
							goods_id:item.goods_id,
						})
					})
					for (var i = 0; i < list.length; i++){this.list.push( list[i] )}
					if( this.list.length == 0 )this.showNone = true
				},error=>{})
			},
			topThis(e){
				for (var i = 0; i < this.topList.length; i++) {
					this.topList[i].showThis = false
				}
				this.topList[e].showThis = true
				this.pages = 1
				this.list = []
				this.AjaxLoad()
			},
			inDetails(item){
				uni.navigateTo({
					url:"/pages_kafei/pages/details/details??goods_id=" + item.goods_id + "&machineCode=" + item.machine_code + "&model_id=" +  item.model_id
				})
			},
			btnThisDetails(item){
				uni.navigateTo({
					url:"/pages_kafei/pages/orderDetails/orderDetails?id=" + item.id
				})
			},
			
			
			
			
		}
	}
</script>
<style lang="scss" scoped>
/deep/ .uni-input-input {font-size:32upx}
/deep/ .uni-radio-input-checked{background-color:rgb(110,43,34) !important;border:2upx solid white !important}
.content .html{
  ::v-deep {
    img {
      width: 100%;
    }
  }
}
</style>